Marko: Deklarativt UI med Streaming Server-Side Rendering

I dagens snabba digitala landskap är webbplatsens prestanda avgörande. En långsam laddning eller en webbplats som inte svarar kan leda till frustrerade användare, högre avvisningsfrekvens och i slutändan förlorade intäkter. Marko, ett deklarativt UI-ramverk, tar itu med dessa problem genom att erbjuda en unik metod för att bygga högpresterande webbapplikationer. Denna artikel kommer att fördjupa sig i Markos kärnfunktioner, särskilt dess streaming server-side rendering (SSR)-funktioner, och förklara varför det är ett övertygande val för utvecklare som bygger webbplatser och webbapplikationer för en global publik.

Vad är Marko?

Marko är ett open source UI-ramverk skapat av eBay och underhålls nu av Marko-teamet. Det utmärker sig från andra ramverk genom sitt fokus på prestanda, enkelhet och skalbarhet. Till skillnad från vissa ramverk som prioriterar rendering på klientsidan, betonar Marko server-side rendering, särskilt streaming SSR. Detta innebär att servern förrenderar HTML för din applikation och skickar den till webbläsaren i bitar (strömmar) allt eftersom den blir tillgänglig, vilket leder till en snabbare First Contentful Paint (FCP) och en förbättrad användarupplevelse.

Nyckelfunktioner och fördelar med Marko

• Deklarativ syntax: Marko använder en deklarativ syntax som liknar HTML, vilket gör den lätt att lära sig och använda. Denna enkelhet minskar inlärningskurvan för utvecklare och gör att de kan fokusera på att bygga funktioner istället för att brottas med komplexa ramverkskoncept.
• Streaming Server-Side Rendering (SSR): Detta är utan tvekan Markos mest kraftfulla funktion. Streaming SSR tillåter servern att skicka HTML till webbläsaren inkrementellt, så snart den är redo, istället för att vänta tills hela sidan är renderad. Detta förbättrar webbplatsens upplevda prestanda avsevärt, särskilt för användare med långsammare internetanslutningar eller de som kommer åt webbplatsen från geografiskt avlägsna platser. Föreställ dig en användare i landsbygden i Indien som besöker en webbplats byggd med Markos streaming SSR. De skulle börja se innehållet mycket snabbare jämfört med en webbplats som enbart förlitar sig på rendering på klientsidan, som måste ladda ner all JavaScript innan något visas.
• Automatisk kodsplittring: Marko delar automatiskt upp din JavaScript-kod i mindre bitar och laddar dem på begäran, vilket minimerar den initiala nedladdningsstorleken och förbättrar sidans laddningstider. Detta är avgörande för mobilanvändare och de med begränsad bandbredd.
• Komponentbaserad arkitektur: Marko främjar en komponentbaserad arkitektur, så att du kan dela upp din applikation i återanvändbara, hanterbara delar. Detta förbättrar kodorganisationen, underhållbarheten och testbarheten.
• HTML-liknande syntax med tillägg: Markos syntax utökar HTML med funktioner som komponenter, loopar och villkorsstyrd rendering, vilket gör den intuitiv för utvecklare som är bekanta med HTML. Till exempel kan du enkelt skapa en återanvändbar knappkomponent och använda den i hela din applikation.
• Optimerad för SEO: Server-side rendering gör din webbplats enklare att genomsöka av sökmotorrobotar, vilket förbättrar din sökmotorrankning. Detta är en betydande fördel för företag som vill locka organisk trafik till sina webbplatser.
• Liten buntstorlek: Marko har en relativt liten körningstid jämfört med andra populära ramverk, vilket ytterligare bidrar till snabbare laddningstider.
• Progressiv förbättring: Marko uppmuntrar progressiv förbättring, vilket gör att din webbplats kan fungera även om JavaScript är inaktiverat eller inte kan laddas. Detta säkerställer en bättre användarupplevelse för alla besökare, oavsett deras webbläsarkapacitet.
• Inbyggda optimeringar: Marko innehåller olika inbyggda optimeringar, såsom mallcachelagring och DOM-diffning, som ytterligare förbättrar prestandan.
• Enkel integration: Marko kan enkelt integreras med befintliga Node.js-backends och andra front-end-verktyg.

Dyk djupare in i Streaming Server-Side Rendering

Låt oss utforska fördelarna med streaming SSR mer detaljerat:

Förbättrad First Contentful Paint (FCP)

FCP är ett viktigt mått för att mäta webbplatsens prestanda. Det representerar den tid det tar för det första innehållet (text, bild, etc.) att visas på skärmen. Streaming SSR minskar FCP avsevärt eftersom webbläsaren börjar ta emot och rendera HTML mycket tidigare än med rendering på klientsidan. Istället för att vänta på att hela JavaScript-paketet ska laddas ner och köras kan webbläsaren omedelbart börja visa sidans initiala innehåll. Föreställ dig en e-handelswebbplats som visar produktlistor. Med streaming SSR ser användaren produktbilder och beskrivningar nästan omedelbart, även innan de interaktiva elementen är helt laddade. Detta skapar en mycket mer engagerande och responsiv användarupplevelse.

Bättre användarupplevelse

En snabbare FCP översätts till en bättre användarupplevelse. Användare är mindre benägna att överge en webbplats om de ser innehåll snabbt. Streaming SSR ger en mer flytande och responsiv upplevelse, särskilt på långsammare nätverk eller enheter. Detta är särskilt viktigt för mobilanvändare i utvecklingsländer där internetanslutningen kan vara opålitlig. Till exempel kan en nyhetswebbplats som använder streaming SSR leverera nyhetsrubriker och sammanfattningar direkt, även till användare med begränsad bandbredd.

SEO-fördelar

Sökmotorrobotar förlitar sig på HTML-innehåll för att förstå strukturen och innehållet på en webbplats. Server-side rendering tillhandahåller lättillgänglig HTML, vilket gör det enklare för sökmotorer att genomsöka och indexera din webbplats. Detta förbättrar din sökmotorrankning och ökar organisk trafik. Medan Google har blivit bättre på att rendera JavaScript, ger SSR fortfarande en betydande fördel, särskilt för webbplatser med komplexa JavaScript-tunga applikationer. En resebyrås webbplats som använder SSR kommer att ha sina destinationssidor korrekt indexerade, vilket säkerställer att de visas i relevanta sökresultat.

Förbättrad tillgänglighet

SSR bidrar till bättre tillgänglighet genom att tillhandahålla HTML-innehåll som enkelt kan parsas av skärmläsare och andra hjälpmedelstekniker. Detta säkerställer att din webbplats kan användas av personer med funktionsnedsättningar. Genom att rendera det initiala innehållet på servern, tillhandahåller du en solid grund för tillgänglighet, även innan JavaScript har laddats helt. Till exempel kommer en statlig webbplats som använder SSR att säkerställa att alla medborgare, oavsett deras förmågor, kan komma åt viktig information.

Marko jämfört med andra ramverk

Hur står sig Marko jämfört med andra populära UI-ramverk som React, Vue och Angular?

Marko vs. React

React är ett mycket använt bibliotek för att bygga användargränssnitt. Medan React kan användas med server-side rendering (med Next.js eller liknande ramverk), förlitar det sig vanligtvis på rendering på klientsidan som standard. Markos streaming SSR ger en prestandafördel jämfört med Reacts traditionella SSR-metod. Reacts ekosystem är enormt och erbjuder många bibliotek och verktyg, men detta kan också leda till komplexitet. Marko fokuserar på enkelhet och prestanda och erbjuder en mer strömlinjeformad utvecklingsupplevelse. Överväg ett komplext instrumentpanelsapplikation. Medan React erbjuder en komponentbaserad metod, kan Markos streaming SSR ge en prestandaförbättring för den initiala sidladdningen, särskilt när du visar stora datamängder.

Marko vs. Vue

Vue är ett annat populärt ramverk känt för sin användarvänlighet och progressiva metod. Vue stöder också server-side rendering (med Nuxt.js). Marko och Vue delar vissa likheter när det gäller enkelhet och komponentbaserad arkitektur. Markos streaming SSR erbjuder dock en distinkt prestandafördel, särskilt för webbplatser med hög trafik eller komplexa användargränssnitt. Vue kräver ofta mer manuell optimering för server-side rendering för att uppnå optimal prestanda. Till exempel kan en webbplats för sociala medier dra nytta av Markos streaming SSR för att snabbt visa användarflöden och uppdateringar.

Marko vs. Angular

Angular är ett komplett ramverk som tillhandahåller en omfattande lösning för att bygga komplexa webbapplikationer. Angular stöder server-side rendering genom Angular Universal. Angular kan dock vara mer komplext att lära sig och använda jämfört med Marko och Vue. Markos enkelhet och prestandafokus gör det till ett övertygande alternativ för projekt där prestanda är högsta prioritet. En stor företagsapplikation kan välja Angular för sina robusta funktioner och skalbarhet, men en mindre start-up kan välja Markos hastighet och enkelhet i utveckling.

Sammanfattningsvis: Medan React, Vue och Angular alla stöder server-side rendering, ger Markos inbyggda streaming SSR en betydande prestandafördel. Marko prioriterar prestanda och enkelhet, vilket gör det till ett utmärkt val för projekt där dessa faktorer är avgörande.

Komma igång med Marko

Att komma igång med Marko är relativt enkelt. Här är en grundläggande översikt:

1. Installera Node.js: Se till att du har Node.js installerat på ditt system.
2. Installera Marko CLI: Kör `npm install -g marko-cli` för att installera Marko-kommandoradsgränssnittet globalt.
3. Skapa ett nytt Marko-projekt: Använd kommandot `marko create my-project` för att skapa ett nytt Marko-projekt.
4. Utforska projektstrukturen: Projektet kommer att innehålla filer som `index.marko` (din huvudkomponent), `server.js` (din server-side entry point) och `marko.json` (din projektkonfiguration).
5. Kör utvecklingsservern: Använd kommandot `npm start` för att starta utvecklingsservern.
6. Börja bygga dina komponenter: Skapa nya `.marko`-filer för dina komponenter och importera dem till din huvudkomponent.

Exempel på Marko-komponent (index.marko):

            
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Marko Example</title>
  <!MARKUPROCESSED>
</head>
<body>
  <h1>Hello, World!</h1>
  <p>This is a simple Marko component.</p>
</body>
</html>

            

              
                Copy
              
            
          

Exempel på Server-Side Rendering (server.js):

            
require('marko/node-require').install();
require('marko/compiler').configure({
  resolveCssUrls: true,
  cache: true
});

const express = require('express');
const marko = require('marko');
const template = marko.load(require.resolve('./index.marko'));

const app = express();

app.get('/', (req, res) => {
  template.render({}, res);
});

app.listen(3000, () => {
  console.log('Server started on port 3000');
});

            

              
                Copy
              
            
          

Detta är bara grundläggande exempel för att komma igång. Marko erbjuder en mängd funktioner och alternativ för att bygga komplexa webbapplikationer. Se den officiella Marko-dokumentationen för mer detaljerad information.

Exempel i verkligheten av Marko i aktion

Medan eBay ursprungligen utvecklade Marko, används det nu av en mängd olika företag i olika branscher:

• eBay: eBay använder Marko omfattande för sin kärnplattform, vilket visar dess förmåga att hantera hög trafik och komplexa användargränssnitt.
• Lazada (Sydostasien): En stor e-handelsplattform i Sydostasien (ägd av Alibaba) använder Marko för att förbättra prestandan och leverera en bättre shoppingupplevelse till sina användare i olika länder med varierande internethastigheter.
• Ett flertal startups och företag: Många andra företag använder Marko för dess prestandafördelar och användarvänlighet.

Dessa exempel visar Markos mångsidighet och lämplighet för ett brett utbud av webbapplikationer.

Bästa praxis för att använda Marko

För att få ut det mesta av Marko, överväg dessa bästa praxis:

• Utnyttja streaming SSR: Dra full nytta av Markos streaming SSR-funktioner för att förbättra FCP och användarupplevelsen.
• Optimera dina komponenter: Optimera dina Marko-komponenter för prestanda genom att minimera DOM-uppdateringar och undvika onödiga återgivningar.
• Använd kodsplittring: Använd Markos automatiska kodsplittringsfunktion för att minska den initiala nedladdningsstorleken på din JavaScript-kod.
• Överväg tillgänglighet: Se till att din webbplats är tillgänglig genom att följa riktlinjer för tillgänglighet och använda semantisk HTML.
• Testa din applikation noggrant: Testa din applikation på olika enheter och webbläsare för att säkerställa en konsekvent och pålitlig användarupplevelse.

Slutsats: Marko – Ett kraftfullt val för modern webbutveckling

Marko är ett kraftfullt och mångsidigt UI-ramverk som erbjuder en övertygande lösning för att bygga högpresterande webbapplikationer. Dess deklarativa syntax, streaming SSR-funktioner och fokus på enkelhet gör det till ett utmärkt val för utvecklare som vill förbättra webbplatsens prestanda, förbättra användarupplevelsen och öka SEO. Genom att anta Marko kan utvecklare skapa webbplatser och webbapplikationer som är snabba, responsiva och tillgängliga för användare runt om i världen. Oavsett om du bygger en liten personlig webbplats eller en stor företagsapplikation är Marko värt att överväga som ditt UI-ramverk. Dess betoning på att leverera innehåll snabbt och effektivt gör det särskilt relevant i dagens globaliserade och prestandadrivna digitala landskap.

Ytterligare resurser:

• Officiell Marko-webbplats
• Marko GitHub-förvar
• Marko-dokumentation